<template>
	<view class="content">
		<view class="shop-open-box">
			<text class="shop-open" :style="{backgroundColor:isShopOpen?'#ff2121':'#939391'}">
				{{isShopOpen?"营业中":"打烊中"}}
			</text>
		</view>
		<view class="text-area">
			<image class="logo" src="../../static/logo-primary.svg"></image>
			<text class="title">欢迎使用泡泡点餐</text>
		</view>
		<view class="button-box">
			<button class="scan" type="primary" @click="onScanCode">扫码点餐</button>
			<button class="login" type='default' @click="onEmployeeLogin">员工登录</button>
		</view>
		<view class="footer">
			<view class="copyright-line">
				<text>© 2025 本小程序由个人开发，欢迎使用，并留下宝贵意见！</text>
			</view>
			<navigator url="" class="footer-link">用户协议</navigator>
			<text class="divider">|</text>
			<navigator url="" class="footer-link">隐私政策</navigator>
			<text class="divider">|</text>
			<navigator url="" class="footer-link">联系方式</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		urlParse,
		wxLogin
	} from '../../utiles/login';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getUserShopStatusApi
	} from '../../api/user';
	import {
		callCloudFun
	} from '../../utiles/callCloudFun';

	const isShopOpen = ref(0)

	const onEmployeeLogin = () => {
		const loginData = uni.getStorageSync('loginData') || {}
		console.log(loginData);
		if (loginData.username) {
			callCloudFun('employeelogin', {
				loginData
			}).then(res => {
				uni.setStorageSync('userInfo', {
					empId: res.id,
					job: res.job,
					name: res.name,
				})
				if (res.job === "管理员" || res.job === "收银员") {
					wx.navigateTo({
						url: '/pages/admin/admin'
					})
				} else {
					uni.redirectTo({
						url: '/pages/employee/employee?job=' + res.job + '&name=' + res.name,
					})
				}
			}).catch(() => {
				uni.removeStorageSync('loginData')
				uni.removeStorageSync('userInfo')
				uni.navigateTo({
					url: '/pages/employeeLogin/employeeLogin'
				})
			})
		} else {
			uni.navigateTo({
				url: '/pages/employeeLogin/employeeLogin',
			})
		}
	}

	onShow(async () => {
		// 查询营业状态
		getUserShopStatusApi().then(res => {
			isShopOpen.value = res
			console.log("营业状态获取成功：", isShopOpen.value);
		})
	})

	const onScanCode = () => {
		wx.scanCode({
			success: res => {
				console.log("扫码：", res);
				const {
					url,
					params
				} = urlParse(res.path)
				// if (params.place && url === "pages/user/user") {
				if (params.place) {
					console.log('place:', params.place);
					uni.navigateTo({
						url: '/pages/user/user?place=' + params.place
					})
				} else {
					uni.showToast({
						title: '扫码错误',
						icon: 'error'
					})
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		height: 100vh;
		padding-bottom: env(safe-area-inset-bottom);
		background:
			linear-gradient(to bottom, transparent, #fff 400rpx),
			linear-gradient(to right, #beecd8 20%, #f4e2d8);

		.shop-open-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 8%;

			.shop-open {
				margin: 0 auto;
				border-radius: 5px;
				padding: 0 10rpx;
				font-size: 25rpx;
				line-height: 20px;
				height: 20px;
				color: #fff;
				border: 2px solid #fff;
				box-shadow: 0 0px 6px rgba(0, 0, 0, 0.2);
			}
		}

		.text-area {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.logo {
				height: 100rpx;
				width: 100rpx;
				margin-bottom: 30rpx;
			}

			.title {
				font-size: 34rpx;
				color: #8f8f94;
			}
		}

		.button-box {
			display: flex;
			flex-direction: column;
			gap: 50rpx;



			.scan {
				background-color: #ff5a5f;
				color: #fff;
				box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);

			}

			.scan:active {
				background-color: rgba(255, 0, 0, 0.5);
			}

			.login {
				box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
			}
		}

		.footer {
			padding: 30rpx 0;
			text-align: center;
			font-size: 24rpx;
			color: #999;
			background: #fff;
			border-top: 1rpx solid #f0f0f0;
			width: 100%;
		}

		.footer-logo {
			width: 40rpx;
			height: 40rpx;
			vertical-align: middle;
			margin-right: 10rpx;
		}

		.footer-link {
			display: inline-block;
			color: #666;
			margin: 0 15rpx;
		}

		.divider {
			color: #ddd;
		}
	}
</style>